<template>
   <view style="background: #fff;margin-bottom: 20upx;"> 
		<view class="goods" @click="click">
			<view class="top webkit">
				<view class="flex">订单号：{{data.ordersn}}</view>
				<text v-if="data.status == -1">已取消</text>
				<text v-if="data.status == 0">待付款</text>
				<text v-if="data.status == 1">待发货</text>
				<text v-if="data.status == 2">待收货</text>
				<text v-if="data.status == 3">已完成</text>
			</view>
			<view v-for="(item1,i1) in data.goods" :key="i1">
				<block v-for='(item,i) in item1.goods' :key = 'i'>
					<view class="center webkit">
						<image :src="item.thumb" mode=""></image>
						<view class="flex ellipsis-2" style="height: 96upx;line-height: 48upx;">{{item.title}}</view>
						<view>
							<text>￥{{item.price}}</text>
							<text style="color: #999;">x{{item.total}}</text>
							<text v-if="item.credit1!=0" style="color: #999;">优惠余额:{{item.credit1}}</text>
						</view>
					</view>
				</block>
			</view>
			<view class="bottom">
				共{{data.goods_num}}件商品 实付: <text> {{data.price}}元</text><text v-if="data.jfdk!=0">+{{data.jfdk}}余额</text>
			</view>
			<view class="bottom" style="line-height: 30upx;height: 30upx;" v-if="Math.abs(data.tongduibao)!=0 || Math.abs(data.jindou)!=0">
				<!-- <text v-if="Math.abs(data.tongduibao)!=0"> +通兑宝抵扣: {{data.tongduibao}} </text> -->
				<!-- <text v-if="Math.abs(data.jindou)!=0"> +金豆抵扣: {{data.jindou}} </text> -->
			</view>
		</view>
		<view class="status webkit">
			<view class="flex"></view>
			<button type="default" v-if='data.status == -1 || data.status == 3' style="line-height: 52upx;" plain="true" @click.stop="del">删除订单</button>
			<button type="primary" v-if='data.status == 0' style="background: #ededed;color: #333;" @click.stop="cancel">取消订单</button>
			<button type="primary" style="background: #EB2E15;" v-if='data.status == 0' @click.stop="pay">支付订单</button>
			<button type="primary" style="background: #EB2E15;" v-if="data.status == 1" @click.stop="fahuo">提醒发货</button>
			<button type="primary" style="background: #EB2E15;" v-if='data.status == 3&&data.iscomment == 0' @click.stop="evaluate">评价</button>
			<button type="primary" style="background: #EB2E15;" v-if='data.status == 3 || data.status == 2' @click.stop="log">查看物流</button>
			<button type="primary" style="background: #EB2E15;" v-if='data.status == 2' @click.stop="confirm">确认收货</button>
		</view>
    </view>
</template>
<script>
    export default {
        props: {
            data: {
                type: Object,
                default: function(e) {
                    return {}
                }
            }
        },
        computed: {
            isImgRight() {
                return this.data.article_type === 2
            },
            isImgLeft() {
                return this.data.article_type === 1
            },
            showImg() {
                return this.data.image_list || this.data.image_url
            }
        },
        methods: {
						fahuo(e) {
							this.$emit('fahuo');
						},
            cancel(e) {
                this.$emit('cancel');
            },
            click(e) {
                this.$emit('click');
            },
            log(e) {
                this.$emit('log');
            },
            evaluate(e) {
                this.$emit('evaluate');
            },
            del(e) {
                this.$emit('del');
            },
            pay(e) {
                this.$emit('pay');
            },
						confirm(e){
							this.$emit('confirm')
						},
            bindClick() {
                this.$emit('click');
            }
        }
    }
</script>

<style>
	.goods{
		padding-bottom: 10upx;
		border-bottom: 1px solid #f0f0f0;
	}
	.goods .top{
		padding: 16upx 20upx;
		border-bottom: 1px solid #f0f0f0;
		margin-bottom: 10upx;
	}
	.goods .top .flex{
		font-size: 26upx;}
	.goods .top text{
		color: #666;
		font-size: 26upx;
	}
	.goods .center{
		    padding: 16upx 30upx;
	}
	.goods .center image{
		width: 160upx;
		height: 160upx;
		margin-right: 20upx;
	}
	.goods .center view{}
	.goods .center .flex{
		margin-right: 20upx;
	}
	.goods .center text{
		display: block;
		text-align: right;
		font-size: 26upx;
	}
	.goods .bottom{
		font-size: 24upx;
		text-align: right;
		padding: 10upx 30upx;
	}
	.goods .bottom text{
		font-size: 26upx;
		color: #f55;
	}
	.status{
		padding: 20upx;
	}
	.status button{
		height: 56upx;
		font-size: 24upx;
		line-height: 56upx;
		margin: 0;
		margin-left: 20upx;
		border-radius: 56upx;
	}
	.status button:after{
		display: none;
	}
</style>
